<template>
  <div>
    <!--header start-->
    <header :class="['header-con','header-w-bg']">
      <router-link to='/membercenter'>
        <a>
          <i class='back-icon'></i>
        </a>
      </router-link>
      <h1 class='header-tit'>绑定专属旅游顾问</h1>
    </header>
    <!--header end-->
    <!--content  start-->
    <div class="consultant-page">
      <img src="../../assets/image/membercenter/trip-consultant.png">
      <div class="consultant-main">
        <div class="consultant-box">
          <div class="avatar"><img src="../../assets/image/membercenter/tx.png" alt=""></div>
          <h2>Hi,您好!</h2>
          <p>我是专属旅游顾问</p>
          <div class="invitation-code bordbox">
            <input type="text" placeholder="请输入邀请码" v-model="recommendCode">
          </div>
          <p class="err-tip">{{consultantInfo.resultMsg}}</p>
          <a class="org-btn" @click="getConsultantInfo">绑定</a>
        </div>
      </div>
    </div>
    <div class="consultant-popup" v-if="commitBind">
      <div class="mask"></div>
      <div class="consultant-con">
        <i class="popup-close-icon" @click="closePopup"></i>
        <div class="consultant-img"><img :src="consultantInfo.content.imgStr == '' ? 'http://paytest.ecwalk.com/static/images/mobileImages/consultant.png' : consultantInfo.content.imgStr" alt=""></div>
        <div class="consultant-info">
          <h2>{{consultantInfo.content.realName}}</h2>
          <ul class="consultant-info-list">
            <li class="flex-box"><label>职务：</label><div>{{consultantInfo.content.govJob}}</div></li>
            <li class="flex-box"><label>门店：</label><div>{{consultantInfo.content.orgName}}</div></li>
            <li class="flex-box"><label>邀请码：</label><div>{{consultantInfo.content.recommendCode}}</div></li>
          </ul>
          <a class="bind-btn" @click="consultantBind">确认绑定</a>
        </div>
      </div>
    </div>
    <!--content  end-->
  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  import weui from 'weui.js'
  import common from '../../assets/js/common'
  export default {
    data () {
      return {
        codeIsBind: {
          'resultCode': '',
          'resultMsg': '',
          'content': false,
          'accessToken': null
        },
        recommendCode: '',
        commitBind: false,
        consultantInfo: {
          'resultCode': '',
          'resultMsg': '',
          'content': {
            'realName': '',
            'govJob': '',
            'govOrg': '',
            'recommendCode': '',
            'mobile': '',
            'imgStr': '',
            'orgName': ''
          },
          'accessToken': null
        }
      }
    },
    created: function () {},
    methods: {
      consultantBind: function () {
        var self = this
        var queryUrl = common.api.memberCenter.bindTravelConsultant
        var config = {
          headers: {
            'access-token': common.accesstoken,
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        var data = qs.stringify({
          userId: common.userid,
          recommendCode: self.recommendCode
        })
        var loading = weui.loading('加载中')
        axios.post(queryUrl, data, config).then(function (res) {
          if (res.data.resultMsg === 'success') {
            loading.hide()
            weui.toast('绑定成功')
          } else {
            self.codeIsBind = res.data
            loading.hide()
            weui.toast(self.codeIsBind.resultMsg)
          }
        })
      },
      getConsultantInfo: function () {
        var self = this
        var queryUrl = common.api.memberCenter.getUserByRecomCode
        var config = {
          headers: {
            'access-token': common.accesstoken,
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }
        var data = qs.stringify({
          recommendCode: self.recommendCode
        })
        var loading = weui.loading('加载中')
        axios.post(queryUrl, data, config).then(function (res) {
          if (res.data.resultMsg === 'success') {
            self.consultantInfo = res.data
            loading.hide()
            self.commitBind = true
          } else {
            self.consultantInfo = res.data
            loading.hide()
          }
        })
      },
      closePopup: function () {
        var self = this
        self.commitBind = false
      }
    }
  }
</script>

<style lang="scss">
  @import '../../assets/sass/member/tripConsultant';
</style>
